<template>
    <span >
        <el-button  
            :size="props.btn.size?props.btn.size:'default'"
            :style="props.btn.style?props.btn.style:'margin-bottom:6px'"
            :id="props.btn.id ? props.btn.id : 0 "
            :type="props.btn.type ? props.btn.type : 'primary'" 
            :icon=" props.btn.icon ? props.btn.icon : '' " 
            :disabled="props.btn.disabled ? props.btn.disabled(): false"
            @click="props.btn.click ?btnClick(props.btn.click) : null"
            @hover="props.btn.hover ? props.btn.hover() : null "
            v-if="props.btn.hidden ? props.btn.hidden() : true "
            :loading="openLoading?props.btn.loading:loading"
            :circle="props.btn.style && JSON.stringify(props.btn.style).indexOf('circle') != -1 ? true : false"
            :plain="props.btn.style && JSON.stringify(props.btn.style).indexOf('plain') != -1  ? true : false"
            :round="props.btn.style && JSON.stringify(props.btn.style).indexOf('round') != -1  ? true : false"
            v-hasPermi="props.btn.btnPermission && props.btn.btnPermission.length ? props.btn.btnPermission : (props.allBtnPermission?['*:*:*']:['*:*:*']) "
            >
            {{btn.name}}
        </el-button>
    </span>             
</template>
<script setup>
const props = defineProps({
    btn:{
        type:Object,
        required:false
    },
    allBtnPermission:{
        type:Boolean,
        required:false,
        default:false,
    }
})

const loading = ref(false);
const openLoading = ref(props.btn.openLoading?props.btn.openLoading:false);

function btnClick(btnEvent){
    if(btnEvent)btnEvent()
    if(!openLoading.value){
        loading.value=true
        setTimeout(() => {
            loading.value=false
        }, 500);
    }
}
</script>
<style >
</style>






























